<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/view/include/css-include.jsp"%>
<%@ include file="/view/include/jsp-include.jsp"%>
<%@ include file="/view/include/jquery-include.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

    $().ready(function() {        
        $("#reSetBtn").bind("click",function(){
            $("form[name='userWriteFrm']").each(function(){
                  this.reset();
                  $("#checkText").empty().html("<font color=red>＊Check duplicate ID</font>");
                  $("#checkId").val("N");
            });
            
        });
        //This ID is not available
        $("#customerPopup").bind("click",function(){
            onCustomerPopup();
            
        });
        $("#checkText").empty().html("<font color=red>＊Check duplicate ID</font>");
        $("#userId").bind("change",function(){
        	$("#checkText").empty().html("<font color=red>＊Check duplicate ID</font>");
        	$("#checkId").val("N");            
        });
        
        $("#check").bind("click",function(){
        	//$("#checkText").empty().html("<font color=red>&nbsp; This ID is not available</font>");
        	var userId     = $("#userId").val();            
            if(userId==null    || userId=="") {   alert("User Id required!!"); $("#userId").focus(); return false; }
            
            $.post(
                    '/getCheckId.json', { 
                    userId : $("#userId").val()
                   },
                function(data) {
                	   if(data.resultCheckId == "0"){
                		   $("#checkText").empty().html("<font color=red>&nbsp; OK</font>");
                		   $("#checkId").val("Y");
                	   }else{
                		   $("#checkText").empty().html("<font color=red>&nbsp; This ID is not available</font>");
                		   $("#checkId").val("N");
                	   }
                });
            
        });

        $("#onList").bind("click",function(){
             location="/user.html";            
        });

        /* 저장버튼 */
        $("#saveBtn").bind("click",function(){       
            $("form[name='userWriteFrm']").submit();
        });

        /* 메인폼 서브밋 */
        $("form[name='userWriteFrm']").ajaxForm({
            dataType: "json",
            beforeSerialize: function($form, options) {
                //return $("form[name='orderFrm']").valid();  jquery 벨류데이션 플러그인 사용시
                 if( !validation() ){       //화면 항목 점검 시작
                    return false;
                }
            },
            success:function(data) {
               if(data.result == true){
                   alert("Saved.....!");
                   location="/user.html";    
               }               
           },
           error:function(){alert("ERROR!");}
        }); 
    });

    function validation(){

        var userId     = $("#userId").val();
        var checkId     = $("#checkId").val();
        var userPw      = $("#userPassword").val();
        var userName    = $("#userName").val();
        var custCode      = $("#custCode").val();
        
        if(checkId== "N") {   alert("ID check required!!"); return false; }
        if(userId==null    || userId=="") {   alert("User Id required!!"); $("#userId").focus(); return false; }
        if(userPw==null    || userPw=="") { alert("User Password required!!"); $("#userPw").focus(); return false; }
        if(userName==null  || userName=="") { alert("User Name required!!"); $("#userName").focus(); return false; }
        //if(custCode==null  || custCode=="") { alert("Costomer required!!"); $("#custCode").focus(); return false; }
   
      return true;      
    } 
    
    function onCustomerPopup(){
        window.open('/customerPop.html?customer=2', 'changeProductPop', 'width=415, height=500, toolbar=no, location=no, status=no, menubar=no, scrollbars=no');
    }
    
    function customerPopValue(custCode , custName , addr1 , addr2, tel, fax){
        $("#custCode").val(custCode);
        $("#custName").val(custName);
        $("#addr1").val(addr1);
        $("#addr2").val(addr2);
        $("#tel").val(tel);
        $("#fax").val(fax);       
    }
    
</script>
</head>
<body>
<div class="wrap">
    <form name="userWriteFrm" method="post" action="/saveUserManage.json">
    <div class="pagetitle">
        <h1>USER LIST / INSERT</h1>
    </div>
    <div>
        <table class="TableST">
            <tr>
                <th width="20%">User Id</th>
                <td width="80%"><input type="text" class="inST" size="80" name="userId" id="userId"/>
	            <a href="#"><img src="images/web/checkin.gif" alt="check" id="check"/></a>
	            <span id="checkText" name="checkText"></span>
	            <input type="hidden" name="checkId" id="checkId" value="N"/>
		        </td>
            </tr>
            <tr>
                <th>User Pw</th>
                <td><input type="password" class="inST" size="80" name="userPassword" id="userPassword"/></td>
            </tr>
            <tr>
                <th>User Name</th>
                <td><input type="text" class="inST" size="80" name="userName" id="userName"/></td>
            </tr>
            <tr>
                <th>Customer</th>
                <td>
                    <input type="text" class="inSTR" size="80" name="custName" id="custName"/>
                    <a href="#"><img src="images/web/bkn_zoom.gif" alt="customerPopup" id="customerPopup"/></a>
                    <input type="hidden" class="inST" size="80" name="custCode" id="custCode"/>
                </td>
            </tr>
            <tr>
                <th rowspan="2">Address</th>
                <td >
                    <input type="text" style="margin-bottom:3px;margin-top:3px;" class="inSTR" size="80" name="addr1" id="addr1"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" style="margin-bottom:3px;margin-top:3px;" class="inSTR" size="80" name="addr2" id="addr2"/>
                </td>
            </tr>
            <tr>
                <th>Telephone</th>
                <td><input type="text" class="inSTR" size="80" name="tel" id="tel"/></td>
            </tr>
            <tr>
                <th>FAX No.</th>
                <td><input type="text" class="inSTR" size="80" name="fax" id="fax"/></td>
            </tr>
            
         </table>
    </div>
    <div class="bo_btn">        
        <ul class="btnst"><li class="a"><a href="#" id="reSetBtn" >INIT</a></li></ul>
        <ul class="btnst"><li class="a"><a href="#" id="onList" >LIST</a></li></ul>
        <ul class="btnst"><li class="a"><a href="#" id="saveBtn" >SAVE</a></li></ul>      
    </div>
    <input type="hidden" name="saveStatus" id="saveStatus" value="SAVE"/>
    </form>
</div>
</body>
</html>